<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--公用头部-->
    <th:block th:replace="common/head::commonHead('菜单-小邑')"/>
    <style>
        #formAdvForm .layui-row {
            margin-top: 20px;
        }
        #formAdvForm .layui-form-item {
            margin-bottom: 0;
        }
        #formAdvForm .layui-form-item .layui-inline {
            margin-bottom: 25px;
            margin-right: 0;
        }
    </style>
</head>
<!--公用js-->
<th:block th:replace="common/head::commonJs"/>
<script>
    var parentId = null;
    var id = null;
    var type = null;
    var icon = null;
    var url = null;
    $(function () {
        id = utils.request.getQueryString("id");
        parentId = utils.request.getQueryString("parentId");
        icon = utils.request.getQueryString("icon");
        type = utils.request.getQueryString("type");
        if (type == 2) {
            url = basePath + '/auth/editAuth';
        } else {
            url = basePath + '/auth/addAuth';
        }
    })
</script>
<body marginwidth="0" marginheight="0">
<form class="layui-form" action="" id="formAdvForm" lay-filter="formAdvForm">
    <div class="layui-fluid layui-fluid-btn">
        <div class="layui-card">
            <div class="layui-card-body">
                <input name="id" type="text" id="keyWord_id" style="display: none">
                <div class="layui-form-item layui-row">
                    <div class="layui-inline layui-col-md6">
                            <label class="layui-form-label layui-form-required">权限类型</label>
                            <div class="layui-input-block">
                                <input name="type" lay-filter="type" type="radio" value="0" title="目录" checked/>
                                <input name="type" lay-filter="type" type="radio" value="1" title="菜单" />
                                <input name="type" lay-filter="type" type="radio" value="2" title="按钮"/>
                            </div>
                    </div>
                    <div class="layui-inline layui-col-md6">
                        <label class="layui-form-label layui-form-required">打开方式</label>
                        <div class="layui-input-block">
                            <input name="target" lay-filter="target" type="radio" value="0" title="组件" checked/>
                            <input name="target" lay-filter="target" type="radio" value="1" title="内联" disabled/>
                            <input name="target" lay-filter="target" type="radio" value="2" title="外联" disabled/>
                        </div>
                    </div>

                </div>
                <div class="layui-form-item">
                    <div class="layui-inline layui-col-md6">
                        <label class="layui-form-label">上级菜单</label>
                        <div class="layui-input-block" id="authTree">
                            <input name="parentId" value="0" id="parentId" class="layui-hide">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md6">
                        <label class="layui-form-label">菜单图标</label>
                        <div class="layui-input-block">
                            <input  id="menuIcon"  name="icon" placeholder="请选择菜单图标"  autocomplete="off" class="layui-input"/>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline layui-col-md6">
                        <label class="layui-form-label layui-form-required">权限名称</label>
                        <div class="layui-input-block">
                            <input name="authName" placeholder="请输入权限名称" autocomplete="off" class="layui-input"
                                   lay-verType="tips" lay-verify="required" required/>
                        </div>
                    </div>

                    <div class="layui-inline layui-col-md6">
                        <label class="layui-form-label">权限标识</label>
                        <div class="layui-input-block">
                            <input id="authCode" name="authCode" placeholder="请输入权限标识" disabled="ture" autocomplete="off" class="layui-input"/>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline layui-col-md6">
                        <label class="layui-form-label">菜单url</label>
                        <div class="layui-input-block">
                            <input id="menuUrl" name="menuUrl" placeholder="请输入菜单url" disabled="ture"  autocomplete="off" class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md6">
                        <label class="layui-form-label layui-form-required">排序号</label>
                        <div class="layui-input-block">
                            <input name="sort" id="sort" placeholder="请输入排序号" type="number" class="layui-input" th:min="1" autocomplete="off"
                                   lay-verType="tips" lay-verify="required|number" required/>
                        </div>
                    </div>
                </div>
                <div class="form-group-bottom">
                    <button class="xy-btn xy-btn-primary subCheckBtn" lay-submit lay-filter="formBtn">提交</button>
                    <button type="reset" class="xy-btn">重置</button>
                </div>
            </div>
        </div>
    </div>
</form>
<script>
    layui.use(['layer', 'jquery', 'form', 'notice', 'iconHhysFa',  'xmSelect', 'numberInput'], function () {
        var $ = layui.jquery
            , form = layui.form
            , notice = layui.notice
            , iconHhysFa = layui.iconHhysFa
            , xmSelect = layui.xmSelect
            , numberInput = layui.numberInput
            , layer = layui.layer;
        /*图标*/
        iconHhysFa.render({
            // 选择器，推荐使用input
            elem: '#menuIcon',
            // 数据类型：fontClass/awesome，推荐使用fontClass
            type: 'awesome',
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            value: utils.string.isEmpty(icon)?icon:"",
            // 每页显示数量，默认12
            limit: 12,
            // fa 图标接口
            url: basePath+'/static/admin/js/font-awesome-4.7.0/less/variables.less',
            // 点击回调
            click: function(data) {
                var typeValue = $("input[name='type']:checked").val();
                if (typeValue == 0 || typeValue == 2){
                    top.layui.notice.msg("操作有误：权限类型为菜单才能选择图标~", {icon: 2});
                    $(".layui-iconpicker-icon i").removeClass($("#menuIcon").val());
                    $("#menuIcon").val(null);
                }
            },
            // 渲染成功后的回调
            success: function(d) {
            }
        });
        var authTree = xmSelect.render({
            el: '#authTree',
            height: '200px',
            data: parent.insTb.options.data,
            initValue: utils.string.isEmpty(parentId) ? [parentId] : [],
            model: {
                label: {type: 'text'},
                icon:"hidden",
                },
            prop: {
                name: 'authName',
                value: 'id'
            },
            name:'authName',
            disabled: true,
            radio: true,
            clickClose: true,
            tree: {
                show: true,
                clickExpand:false,
                clickCheck:true,
                expandedKeys:true,
                indent: 15,
                strict: false,
            },
            on: function(data){
                if (data.isAdd) {
                    var item = data.change[0];
                    if (item != null) {
                         if (item.type == 2) {
                             top.layui.notice.msg("操作有误：请选择菜单~" ,{icon: 2,position:"topCenter"});
                            $("#parentId").val(null);
                            return data.change.slice(1, 1)
                        } else {
                            $("#parentId").val(item.id)
                        }
                    }
                }
            },
        });
        //监听提交
        form.on('radio(type)', function (data) {
            if (data.value == 0){
                authTree.update({
                    disabled:true
                });
                authTree.setValue([{authName:"",id:""}]);
                $("input[name=target][value='0']").attr("checked", true);
                $("input[name=target][value='0']").attr("disabled", false);
                $("input[name=target][value='1']").attr("disabled", true);
                $("input[name=target][value='2']").attr("disabled", true);
                $(".layui-iconpicker-icon i").removeClass($("#menuIcon").val());
                $("#menuIcon").val(null);
                $("#menuUrl").val(null);
                $("#menuUrl").attr("disabled",true);
                $("#authCode").val(null);
                $("#authCode").attr("disabled",true);
                $("#parentId").val(0);
            }else if (data.value == 1){
                authTree.update({
                    disabled:false
                });
                $("input[name=target][value='0']").attr("checked", true);
                $("input[name=target][value='0']").attr("disabled", false);
                $("input[name=target][value='1']").attr("disabled", false);
                $("input[name=target][value='2']").attr("disabled", false);
                $("#menuUrl").attr("disabled",false);
                $("#authCode").val(null);
                $("#authCode").attr("disabled",true);
            }else if (data.value == 2){
                authTree.update({
                    disabled:false
                });
                $("input[name=target][value='0']").attr("checked", true);
                $("input[name=target][value='0']").attr("disabled", false);
                $("input[name=target][value='1']").attr("disabled", true);
                $("input[name=target][value='2']").attr("disabled", true);
                $(".layui-iconpicker-icon i").removeClass($("#menuIcon").val());
                $("#menuIcon").val(null);
                $("#menuUrl").val(null);
                $("#menuUrl").attr("disabled",true);
                $("#authCode").attr("disabled",false);
            }
            form.render();
        });
        form.on('submit(formBtn)', function (data) {
            var formDate = data.field;
            if (formDate.type != 0){
                if (!utils.string.isEmpty(authTree.getValue("valueStr"))){
                    top.layui.notice.msg("操作有误：请选择菜单~" ,{icon: 2,position:"topCenter"});
                    return false;
                }
            }
            if (type == 2) {
                if (isEmpty(formDate.id)) {
                    formDate.id = id;
                }
            }
            var loadIndex = null;
            checkSubBtn(1);
            sendAjaxPostToCallback(
                url,
                formDate,
                function (data) {
                    if (data.success) {
                        // 提示信息
                        top.layui.notice.msg(data.msg ,{icon: 1,position:"topCenter"});
                        // 获取当前iframe层的索引
                        var index = parent.layer.getFrameIndex(window.name);
                        // 关闭弹窗
                        parent.layer.close(index);
                        // 重载表格
                        parent.insTb.refresh();
                    } else {
                        checkSubBtn(2);
                        top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                    }
                },
                function (data) {
                    checkSubBtn(2);
                    if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                        top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                    }else{
                        top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                    }
                },
                function () {
                    loadIndex = layer.load(1);
                },
                function () {
                    layer.close(loadIndex);
                },
            )
            return false;
        });
        /*修改回填表单*/
        if (type == 2){
            //获取详情信息，填充表单
            var loadIndex = null;
            sendAjaxPostToCallbackAsync(
                basePath + '/auth/detail',
                {id: id},
                false,
                function (result) {
                    if (result.success == true) {
                        layui.form.val('formAdvForm', result.data);
                        numberInput.render("#sort", {
                            min: 1,
                            defaultValue:result.data.sort
                        });
                        if (result.data.type != 0){
                            authTree.update({
                                disabled:false
                            });
                        }
                        if (result.data.type == 1){
                            $("input[name=target][value='0']").attr("disabled", false);
                            $("input[name=target][value='1']").attr("disabled", false);
                            $("input[name=target][value='2']").attr("disabled", false);
                            $("#menuUrl").attr("disabled",false);
                        }
                        if (result.data.type == 2){
                            $("#authCode").attr("disabled",false);
                        }
                        form.render();
                    } else {
                        top.layui.notice.msg(result.msg ,{icon: 2,position:"topCenter"});
                    }
                },
                function (data) {
                    if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                        top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                    }else{
                        top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                    }
                },
                function () {
                    loadIndex = layer.load(1);
                },
                function () {
                    layer.close(loadIndex);
                },
            )
        }else {
            numberInput.render("#sort", {
                min: 1,
                defaultValue:1
            });
        }
    });
</script>
</body>
</html>
